<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>手风琴实例</title>
		<meta http-equiv="keywords" content="">
	    <meta http-equiv="description" content="">
	    <!--<meta http-equiv="X-UA-Compatible" content=“IE=EmulateIE8″>-->
	    <meta http-equiv="X-UA-Compatible" content=”IE=Edge,chrome=1″ />
	    <meta name="renderer" content="webkit">
	    <link rel="stylesheet" href="style/css/base/MyReset.css" />
	    <link rel="stylesheet" href="style/css/common/common.css" />
	    <link rel="stylesheet" href="style/css/common/main.css" />
	    <link rel="stylesheet" href="style/css/common/leftMenu.css" />
	    <link rel="stylesheet" href="style/css/page/sfq.css" />
	</head>
	<body>
		<div class="Ct marginTop">
			<p class="fontSize16 color_3 fontWeight marginTop20">类型一</p>
			<div>
				<div class="leftMenuTree">
	        		<div class="leftMenuTree_part">
	    				<div class="leftMenuTree_partDiv titleClick" onclick="showList(this,'titleClick')">
	    					<label class="menuLabel">场景配置</label>
	    					<div name="mark" class="showicon"></div>
	    				</div>
	    				<div name="mark1">
	    					<ul class="menu_ul">
	    						<li class="liClick" onclick="changeMenu(event,'liClick','wy_iframe1')">业务大类配置</li>
	    						<li onclick="changeMenu(event,'liClick','wy_iframe2')">业务小类配置</li>
	    						<li onclick="changeMenu(event,'liClick','wy_iframe3')">小区配置</li>
	    					</ul>
	    				</div>
	    			</div>
	    			<div class="leftMenuTree_part">
	    				<div class="leftMenuTree_partDiv" onclick="showList(this,'titleClick')">
	    					<label class="menuLabel">告警配置</label>
	    					<div name="mark" class="showiconClick"></div>
	    				</div>
	    				<div name="mark1" style="display: none;">
	    					<ul class="menu_ul">
	    						<li onclick="changeMenu(event,'liClick','wy_iframe4')">HTTP访问成功率</li>
	    						<li onclick="changeMenu(event,'liClick','')">HTTP相应平均时延</li>
	    						<li onclick="changeMenu(event,'liClick','')">HTTP平均响应时延</li>
	    						<li onclick="changeMenu(event,'liClick','')">HTTP平均下载速率</li>
	    					</ul>
	    				</div>
	    			</div>
	    		</div>
	    		<!--
	            	描述：右侧内容
	            -->
	            <iframe id="wy_iframe1" src="wyIframe1.html" frameBorder="0" scrolling="auto" width="970px"></iframe>
	            <iframe id="wy_iframe2" src="wyIframe2.html" frameBorder="0" scrolling="auto" width="970px" style="display: none;"></iframe>
	            <iframe id="wy_iframe3" src="wyIframe3.html" frameBorder="0" scrolling="auto" width="970px" style="display: none;"></iframe>
	            <iframe id="wy_iframe4" src="wyIframe4.html" frameBorder="0" scrolling="auto" width="970px" style="display: none;"></iframe>
	    		<div class="ClearFloat"></div>
	    	</div>
    		<p class="marginTop20">
    			<label class="fontSize16 color_3 fontWeight">备注:</label>
    			<label class="fontSize14">该手风琴实例可以同时实现右侧内容以iframe展现，点击切换右侧内容。</label>
    		</p>
    		<p class="marginTop20">
    			<label class="fontSize16 color_3 fontWeight">类型二</label>
    			<label class="fontSize14">三级导航</label>
    		</p>
    		<div class="leftMenuTree">
    			<div class="leftMenuTree_part">
    				<div class="sfq_first" onclick="changeMenu1(this,'liClick','sfqFirst1_Content1','sqfFlag1')">
    					<label class="menuLabel">场景配置</label>
    					<div name="mark" class="sfq_icon"></div>
    				</div>
    				<div name="mark1">
    					<ul class="sfq_first_ul">
    						<li>
    							<div class="sfq_second" onclick="changeMenu1(this,'liClick','sfqFirst2_Content1','sqfFlag2')">
	    							<div class="paddingLeft25">业务大类配置</div>
	    							<div name="mark" class="sfq_icon spLeft"></div>
	    						</div>
	    						<ul class="sfq_second_ul">
	    							<li onclick="changeMenu1(this,'liClick','sfqFirst3_Content1','sqfFlag3')">业务大类配置1</li>
	    							<li onclick="changeMenu1(this,'liClick','sfqFirst3_Content2','sqfFlag3')">业务大类配置2</li>
	    							<li onclick="changeMenu1(this,'liClick','sfqFirst3_Content3','sqfFlag3')">业务大类配置3</li>
	    						</ul>
    						</li>
    						<li>
    							<div class="sfq_second" onclick="changeMenu1(this,'liClick','sfqFirst2_Content2','sqfFlag2')">
	    							<div class="paddingLeft25">业务小类配置</div>
	    							<div name="mark" class="sfq_icon1 spLeft"></div>
	    						</div>
	    						<ul class="sfq_second_ul" style="display: none;">
	    							<li onclick="changeMenu1(this,'liClick','sfqFirst3_Content4','sqfFlag3')">业务小类配置1</li>
	    							<li onclick="changeMenu1(this,'liClick','sfqFirst3_Content5','sqfFlag3')">业务小类配置2</li>
	    							<li onclick="changeMenu1(this,'liClick','sfqFirst3_Content6','sqfFlag3')">业务小类配置3</li>
	    						</ul>
    						</li>
    						<li>
    							<div class="sfq_second" onclick="changeMenu1(this,'liClick','sfqFirst2_Content3','sqfFlag2')">
	    							<div class="paddingLeft25">小区配置</div>
	    							<div name="mark" class="sfq_icon1 spLeft"></div>
	    						</div>
	    						<ul class="sfq_second_ul" style="display: none;">
	    							<li onclick="changeMenu1(this,'liClick','sfqFirst3_Content7','sqfFlag3')">小区配置1</li>
	    							<li onclick="changeMenu1(this,'liClick','sfqFirst3_Content8','sqfFlag3')">小区配置2</li>
	    							<li onclick="changeMenu1(this,'liClick','sfqFirst3_Content9','sqfFlag3')">小区配置3</li>
	    						</ul>
    						</li>
    					</ul>
    				</div>
    			</div>
    			<div class="leftMenuTree_part">
    				<div class="sfq_first liClick" onclick="changeMenu1(this,'liClick','sfqFirst1_Content2','sqfFlag1')">
    					<label class="menuLabel">告警配置</label>
    					<!--<div name="mark" class="sfq_icon1"></div>-->
    				</div>
    			</div>
    		</div>
    		<!--
            	时间：2016-08-26
            	描述：三级导航对应内容
            -->
            <div>
            	<div id="sfqFirst1_Content1" style="display: none;">场景配置导航对应内容</div>
            	<div id="sfqFirst1_Content2">告警配置导航对应内容</div>
            	<div id="sfqFirst2_Content1" style="display: none;">业务大类配置导航对应内容</div>
            	<div id="sfqFirst2_Content2" style="display: none;">业务小类配置导航对应内容</div>
            	<div id="sfqFirst2_Content3" style="display: none;">小区配置导航对应内容</div>
            	<div id="sfqFirst3_Content1" style="display: none;">业务大类配置导航对应内容1</div>
            	<div id="sfqFirst3_Content2" style="display: none;">业务大类配置导航对应内容2</div>
            	<div id="sfqFirst3_Content3" style="display: none;">业务大类配置导航对应内容3</div>
            	<div id="sfqFirst3_Content4" style="display: none;">业务小类配置导航对应内容1</div>
            	<div id="sfqFirst3_Content5" style="display: none;">业务小类配置导航对应内容2</div>
            	<div id="sfqFirst3_Content6" style="display: none;">业务小类配置导航对应内容3</div>
            	<div id="sfqFirst3_Content7" style="display: none;">小区配置导航对应内容1</div>
            	<div id="sfqFirst3_Content8" style="display: none;">小区配置导航对应内容2</div>
            	<div id="sfqFirst3_Content9" style="display: none;">小区配置导航对应内容3</div>
            </div>
		</div>
	<script type="text/javascript" src="style/js/base/jquery-1.9.1.min.js" ></script>
	<script type="text/javascript" src="style/js/common/Event.js" ></script>
	</body>
</html>
